<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% load static %}
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <!-- 引入Bootstrap图标 -->
    <link href="{% static 'css/bootstrap-icons.min.css' %}" rel="stylesheet">
    <!-- 引入自定义CSS -->
    <link href="{% static 'css/style.css' %}" rel="stylesheet">
    <!-- 引入动画库 -->
    <link href="{% static 'css/animate.min.css' %}" rel="stylesheet">

  </head>
  <body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="{% url 'index' %}" style="rounded">
              <span class="text-primary" style="font-size:18px;font-weight:600;">情感分析与智能引导</span>
          </a>
        </div>
      </div>
    </nav>
    
    <div class="main_content">
      <div class="jumbotron animate__animated animate__fadeIn">
    <div class="container-fluid py-4">
        <h1 class="display-5 fw-bold"><i class="bi bi-robot me-3 text-primary"></i>情感分析与智能引导</h1>
        <!-- <p class="col-md-8 fs-4">
            本系统基于开源大语言模型，提供基础对话和知识问答两种功能模式。
        </p> -->
        <div class="row mt-5">
            <div class="col-md-6 mb-3">
                <div class="card h-100 animate__animated animate__fadeInLeft" style="animation-delay: 0.2s;">
                    <div class="card-body p-4">
                        <div class="text-center mb-4">
                            <i class="bi bi-chat-dots" style="font-size: 3rem; color: var(--primary-color);"></i>
                        </div>
                        <h5 class="card-title text-center">上传视频并对其中人物情感进行分析</h5>
                        <!-- <p class="card-text"></p> -->
                        <div class="text-center mt-4">
                            <a href="/emotion/upload" class="btn btn-primary btn-lg">
                                <i class="bi bi-arrow-right-circle me-2"></i>开始情感分析
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="card h-100 animate__animated animate__fadeInRight" style="animation-delay: 0.4s;">
                    <div class="card-body p-4">
                        <div class="text-center mb-4">
                            <i class="bi bi-file-earmark-text" style="font-size: 3rem; color: var(--success-color);"></i>
                        </div>
                        <h5 class="card-title text-center">针对特定事件的偏激观点进行智能引导</h5>
                        <!-- <p class="card-text"></p> -->
                        <div class="text-center mt-4">
                            <a href="/intelligence/interaction" class="btn btn-success btn-lg">
                                <i class="bi bi-arrow-right-circle me-2"></i>开始智能引导
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>

    <script>
    	document.addEventListener('DOMContentLoaded', () => {
    		const fileInput = document.getElementById('formFileMultiple');
    		const sendButton = document.getElementById('sendButton');
    		const feedbackMessage = document.getElementById('feedbackMessage');
    		const errorMessage = document.getElementById('errorMessage');
    
    		// 监听文件选择
    		fileInput.addEventListener('change', () => {
    			if (fileInput.files.length > 0) {
    				sendButton.disabled = false;
    			} else {
    				sendButton.disabled = true;
    			}
    		});
    
    		// 监听发送按钮的点击事件
    		sendButton.addEventListener('click', () => {
    			const files = fileInput.files;
    			if (files.length > 0) {
    				// 禁用按钮防止重复点击
    				sendButton.disabled = true;
    				
    				// 获取第一个文件的大小（字节）
    				const fileSize = files[0].size;
    				// 800MB限制 (800 * 1024 * 1024 字节)
    				const uploadSuccess = fileSize <= 800 * 1024 * 1024;
    
    				// 模拟上传延迟
    				setTimeout(() => {
    					if (uploadSuccess) {
    						// 显示上传成功反馈
    						feedbackMessage.style.display = 'flex';
    						
    						// 1.5秒后隐藏反馈并恢复按钮状态
    						setTimeout(() => {
    							feedbackMessage.style.display = 'none';
    							sendButton.disabled = false;
    						}, 1500);
    					} else {
    						// 显示上传失败反馈
    						errorMessage.style.display = 'flex';
    						
    						// 3秒后隐藏反馈并恢复按钮状态
    						setTimeout(() => {
    							errorMessage.style.display = 'none';
    							sendButton.disabled = false;
    						}, 3000);
    					}
    				}, 1200); // 模拟延迟
    			}
    		});
    	});
    </script>

    <!--联系我们-->
    <div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="contactModalLabel">联系我们</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body">
            <form>
              <div class="mb-3">
                <label for="name" class="form-label">姓名</label>
                <input type="text" class="form-control" id="name" placeholder="请输入您的姓名">
              </div>
              <div class="mb-3">
                <label for="email" class="form-label">邮箱</label>
                <input type="email" class="form-control" id="email" placeholder="请输入您的邮箱">
              </div>
              <div class="mb-3">
                <label for="message" class="form-label">消息</label>
                <textarea class="form-control" id="message" rows="3" placeholder="请输入您的消息"></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">发送</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 引入Bootstrap JavaScript -->
    <script src="{% static 'js/jquery.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
  </body>
</html>

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="emotion/upload/">情感分析</a>
    <a href="intelligence/interaction/">智能交互</a>
</body>
</html> -->